import React, {Component} from 'react';
import style from './keyboard.module.css';

class Keyboard extends Component {
  state = {
    url: ''
  };

  clickBoard(item) {
    //item.id传递到右侧组件
    //方案: 先传递到父组件
    // 父组件传递到 另一个子组件
    this.props.clickBoard(item);

    //让音乐响起
    this.setState({
      url: item.src
    }, () => {
      this.refs.music.play();
    })
    //响
  };

  render() {
    // console.log();
    let {musicList} = this.props;
    return (
      <div>
        <audio ref='music' src={this.state.url}/>
        <ul>
          {
            musicList.length && musicList.map((item) => {
              return <li onClick={this.clickBoard.bind(this, item)} key={item.id} className={style.item}>
                {item.letter}
              </li>;
            })
          }
        </ul>
      </div>
    );
  }
}

export default Keyboard;
